*{
    margin: 0;
    padding: 0;
}

:root {
    --background-color:#2c3c4f;
    --border-color:#7691ad;  
    --font-color: white;
    --h2-border-color: #94afcb; 
    --a-border-color:#90acc5; 
    --a-hover-background-color:#90acc5;
  }

  
html{
    font-size: 14px;
}

body{
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Shijie;
}

@font-face {
    font-family: "Shijie";
    src: url("汉仪正圆-45S.ttf");
  }

.card{
    /* flex布局下元素不按比例缩放 */
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    width: 300px;
    height: 450px;
    overflow: hidden;
    margin: 20px;
    background-color: var(--border-color);
    border-radius: 20px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* flex 子元素 纵向排列 */
    flex-direction: column;
    /* 阴影 */
    box-shadow: 0 0 30px #2c2c2c;
    /* 统一字体颜色 */
    color: var(--font-color);
}

.photo{
    position: absolute;
    /* 默认为放大 */
    width: 100%;
    height: 100%;
    top: 0px;
    overflow: hidden;
    border-radius: 0%;
    transition: 0.3s;
}

.photo::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient(to top,#333,transparent); */
}
.card:hover .photo::before{
    /* 缩小时隐藏 */
    display: none;
}

.photo img{
    /* 图片宽高均为100% */
    /* 然后按照cover缩放，剪裁长边 */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card:hover .photo{
    /* 鼠标移上变小 */
    width: 120px;
    height: 120px;
    top: 30px;
    border-radius: 50%;
    box-shadow: 0 0 20px #111;
}

h1{
    position: absolute;
    top: 380px;
    transition: 0.3s;

}
.card:hover h1{
    position: absolute;
    top: 170px;
}
h2{
    margin-top: 220px;
    width: 80%;
    font-weight: normal;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--h2-border-color);
}

p{
    width: 90%;
    /* 段落缩进2个字符大小 */
    text-indent: 2em;
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 30px;
}

a{
    color: var(--font-color);
    text-decoration: none;
    padding: 12px 24px;
    border: 1px solid var(--a-border-color);
    border-radius: 8px;
}
a:hover{
    color: #fff;
    background-color: var(--a-hover-background-color);
}

